<!DOCTYPE html>
<html lang="zh-Hans">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" href="/images/favicon-32x32.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Alata&family=Josefin+Sans:wght@300&display=swap"
      rel="stylesheet"
    />
    <title>Loop Studios</title>
  </head>
  <body>
    <!-- Hero -->
    <section id="hero">
      <!-- Hero容器 -->
      <div class="container max-w-6xl mx-auto px-6 py-12">
        <!-- 菜单/logo 容器 -->
        <nav class="flex items-center justify-between font-bold text-white">
          <!-- LOGO -->
          <img src="/images/logo.svg" alt="" />
          <!-- 菜单 -->
          <div class="hidden h-10 font-alata md:flex md:space-x-8">
            <div class="group">
              <a href="">关于我们</a>
              <div
                class="mx-2 group-hover:border-b group-hover:border-blue-50"
              ></div>
            </div>
            <div class="group">
              <a href="">职业生涯</a>
              <div
                class="mx-2 group-hover:border-b group-hover:border-blue-50"
              ></div>
            </div>
            <div class="group">
              <a href="">最新活动</a>
              <div
                class="mx-2 group-hover:border-b group-hover:border-blue-50"
              ></div>
            </div>
            <div class="group">
              <a href="">产品列表</a>
              <div
                class="mx-2 group-hover:border-b group-hover:border-blue-50"
              ></div>
            </div>
            <div class="group">
              <a href="">客户支持</a>
              <div
                class="mx-2 group-hover:border-b group-hover:border-blue-50"
              ></div>
            </div>
          </div>
          <!-- 汉堡按钮-->
          <div class="md:hidden">
            <button
              id="menu-btn"
              type="button"
              class="z-40 block hamburger md:hidden focus:outline-none"
            >
              <span class="hamburger-top"></span>
              <span class="hamburger-middle"></span>
              <span class="hamburger-bottom"></span>
            </button>
          </div>
        </nav>
        <!-- 移动端菜单 -->
        <div
          id="menu"
          class="hidden absolute top-0 bottom-0 left-0 flex-col self-end w-full min-h-screen py-1 pt-40 pl-12 space-y-3 text-white uppercase bg-black"
        >
          <a href="" class="hover:text-pink-500">关于我们</a>
          <a href="" class="hover:text-pink-500">职业生涯</a>
          <a href="" class="hover:text-pink-500">最新活动</a>
          <a href="" class="hover:text-pink-500">产品列表</a>
          <a href="" class="hover:text-pink-500">客户支持</a>
        </div>
        <div
          class="max-w-lg mt-32 mb-32 p-4 font-sans text-4xl text-white uppercase border-2 md:p-10 md:m-32 md:mx-0 md:text-6xl"
        >
          Impressive Experiences That Deliver
        </div>
      </div>
    </section>

    <!-- feature -->
    <section id="feature">
      <!-- 容器 -->
      <div
        class="relative container flex flex-col max-w-6xl mx-auto my-32 px-6 text-gray-900 md:flex-row md:px-0"
      >
        <!-- 图片 -->
        <img src="/images/desktop/image-interactive.jpg" alt="" />
        <!-- 文字容器 -->
        <div
          class="top-48 pr-0 bg-white md:absolute md:right-0 md:py-0 md:bottom-0 md:flex md:flex-col md:justify-end md:pl-20"
        >
          <h2
            class="max-w-lg mt-10 mb-6 font-sans text-4xl text-center text-gray-900 uppercase md:text-5xl md:mt-0 md:text-left"
          >
            交互式 vr 领导者
          </h2>
          <p class="max-w-md text-center md:text-left">
            Loopstudios 成立于 2011
            年，一直为全球一些最优秀的公司制作世界级的虚拟现实项目。
            我们屡获殊荣的创作通过与其品牌绑定的数字体验改变了企业。
          </p>
        </div>
      </div>
    </section>

    <!-- creations -->
    <section id="creations">
      <!-- 容器 -->
      <div class="container max-w-6xl mx-auto my-32 px-6 text-gray-900 md:px-0">
        <!-- 头部 -->
        <div class="flex justify-center mb-20 md:justify-between">
          <h2 class="text-4xl text-center uppercase md:text-left md:text-5xl">
            我们的创作
          </h2>
          <button class="hidden btn md:block">查看全部</button>
        </div>
        <!-- 项目容器 -->
        <div class="item-container">
          <!-- 项目1 -->
          <div class="group item">
            <!-- 桌面图片 -->
            <img
              src="/images/desktop/image-deep-earth.jpg"
              alt=""
              class="hidden w-full duration-200 md:block group-hover:scale-110"
            />
            <!-- 移动端图片 -->
            <img
              src="/images/mobile/image-deep-earth.jpg"
              alt=""
              class="w-full md:hidden"
            />
            <!-- 渐变 -->
            <div class="item-gradient"></div>
            <!-- 文字 -->
            <h5>Deep Earth</h5>
          </div>
          <!-- 项目2 -->
          <div class="group item">
            <!-- 桌面图片 -->
            <img
              src="/images/desktop/image-night-arcade.jpg"
              alt=""
              class="hidden w-full duration-200 md:block group-hover:scale-110"
            />
            <!-- 移动端图片 -->
            <img
              src="/images/mobile/image-night-arcade.jpg"
              alt=""
              class="w-full md:hidden"
            />
            <!-- 渐变 -->
            <div class="item-gradient"></div>
            <!-- 文字 -->
            <h5>Night Arcade</h5>
          </div>
          <!-- 项目3 -->
          <div class="group item">
            <!-- 桌面图片 -->
            <img
              src="/images/desktop/image-soccer-team.jpg"
              alt=""
              class="hidden w-full duration-200 md:block group-hover:scale-110"
            />
            <!-- 移动端图片 -->
            <img
              src="/images/mobile/image-soccer-team.jpg"
              alt=""
              class="w-full md:hidden"
            />
            <!-- 渐变 -->
            <div class="item-gradient"></div>
            <!-- 文字 -->
            <h5>Soccer Team VR</h5>
          </div>
          <!-- 项目4 -->
          <div class="group item">
            <!-- 桌面图片 -->
            <img
              src="/images/desktop/image-grid.jpg"
              alt=""
              class="hidden w-full duration-200 md:block group-hover:scale-110"
            />
            <!-- 移动端图片 -->
            <img
              src="/images/mobile/image-grid.jpg"
              alt=""
              class="w-full md:hidden"
            />
            <!-- 渐变 -->
            <div class="item-gradient"></div>
            <!-- 文字 -->
            <h5>The Grid</h5>
          </div>
        </div>
        <!-- 项目容器2 -->
        <div class="item-container mt-6 md:mt-10">
          <!-- 项目1 -->
          <div class="group item">
            <!-- 桌面图片 -->
            <img
              src="/images/desktop/image-from-above.jpg"
              alt=""
              class="hidden w-full duration-200 md:block group-hover:scale-110"
            />
            <!-- 移动端图片 -->
            <img
              src="/images/mobile/image-from-above.jpg"
              alt=""
              class="w-full md:hidden"
            />
            <!-- 渐变 -->
            <div class="item-gradient"></div>
            <!-- 文字 -->
            <h5>From Up Above VR</h5>
          </div>
          <!-- 项目2 -->
          <div class="group item">
            <!-- 桌面图片 -->
            <img
              src="/images/desktop/image-pocket-borealis.jpg"
              alt=""
              class="hidden w-full duration-200 md:block group-hover:scale-110"
            />
            <!-- 移动端图片 -->
            <img
              src="/images/mobile/image-pocket-borealis.jpg"
              alt=""
              class="w-full md:hidden"
            />
            <!-- 渐变 -->
            <div class="item-gradient"></div>
            <!-- 文字 -->
            <h5>Pocket Borealis</h5>
          </div>
          <!-- 项目3 -->
          <div class="group item">
            <!-- 桌面图片 -->
            <img
              src="/images/desktop/image-curiosity.jpg"
              alt=""
              class="hidden w-full duration-200 md:block group-hover:scale-110"
            />
            <!-- 移动端图片 -->
            <img
              src="/images/mobile/image-curiosity.jpg"
              alt=""
              class="w-full md:hidden"
            />
            <!-- 渐变 -->
            <div class="item-gradient"></div>
            <!-- 文字 -->
            <h5>The Curiosity</h5>
          </div>
          <!-- 项目4 -->
          <div class="group item">
            <!-- 桌面图片 -->
            <img
              src="/images/desktop/image-fisheye.jpg"
              alt=""
              class="hidden w-full duration-200 md:block group-hover:scale-110"
            />
            <!-- 移动端图片 -->
            <img
              src="/images/mobile/image-fisheye.jpg"
              alt=""
              class="w-full md:hidden"
            />
            <!-- 渐变 -->
            <div class="item-gradient"></div>
            <!-- 文字 -->
            <h5>Make it Fisheye</h5>
          </div>
        </div>
        <!-- 底部按钮 -->
        <div class="flex justify-center mt-10 md:hidden">
          <button class="btn w-full md:hidden">查看全部</button>
        </div>
      </div>
    </section>

    <footer class="bg-black">
      <!-- 容器 -->
      <div class="container max-w-6xl mx-auto py-10">
        <!-- 底部弹性容器 -->
        <div
          class="flex flex-col items-center mb-8 space-y-6 md:flex-row md:space-y-0 md:justify-between md:items-start"
        >
          <!-- 菜单和logo容器 -->
          <div
            class="flex flex-col items-center space-y-8 md:items-start md:space-y-4"
          >
            <!-- logo -->
            <div class="h-8">
              <img src="/images/logo.svg" alt="" class="w-44 md:ml-3" />
            </div>
            <!-- 菜单 -->
            <div
              class="flex flex-col items-center space-y-4 font-bold text-white md:flex-row md:space-y-0 md:space-x-6 md:ml-3"
            >
              <!-- 菜单项1 -->
              <div class="h-10 group">
                <a href="">关于我们</a>
                <div
                  class="mx-2 group-hover:border-b group-hover:bg-blue-50"
                ></div>
              </div>
              <!-- 菜单项2 -->
              <div class="h-10 group">
                <a href="">职业生涯</a>
                <div
                  class="mx-2 group-hover:border-b group-hover:bg-blue-50"
                ></div>
              </div>
              <!-- 菜单项3 -->
              <div class="h-10 group">
                <a href="">最新活动</a>
                <div
                  class="mx-2 group-hover:border-b group-hover:bg-blue-50"
                ></div>
              </div>
              <!-- 菜单项4 -->
              <div class="h-10 group">
                <a href="">产品列表</a>
                <div
                  class="mx-2 group-hover:border-b group-hover:bg-blue-50"
                ></div>
              </div>
              <!-- 菜单项5 -->
              <div class="h-10 group">
                <a href="">客户支持</a>
                <div
                  class="mx-2 group-hover:border-b group-hover:bg-blue-50"
                ></div>
              </div>
            </div>
          </div>
          <!-- 社交和版权容器 -->
          <div
            class="flex flex-col items-start justify-between space-y-4 text-gray-500"
          >
            <!-- 图标 -->
            <div
              class="flex items-center justify-center space-x-4 mx-auto md:justify-end md:mx-0"
            >
              <!-- 图标1 -->
              <div class="h-8 group">
                <a href="">
                  <img src="/images/icon-facebook.svg" alt="" class="h-6" />
                </a>
              </div>
              <!-- 图标2 -->
              <div class="h-8 group">
                <a href="">
                  <img src="/images/icon-twitter.svg" alt="" class="h-6" />
                </a>
              </div>
              <!-- 图标3 -->
              <div class="h-8 group">
                <a href="">
                  <img src="/images/icon-pinterest.svg" alt="" class="h-6" />
                </a>
              </div>
              <!-- 图标4 -->
              <div class="h-8 group">
                <a href="">
                  <img src="/images/icon-instagram.svg" alt="" class="h-6" />
                </a>
              </div>
            </div>
            <!-- 版权 -->
            <div class="font-bold">
              &copy; 2022 Loopstudios. All Right Reserved
            </div>
          </div>
        </div>
      </div>
    </footer>
    <script type="module" src="/main.js"></script>
  </body>
</html>
